<template>
<div class="article-meta">
    <nuxt-link :to="{
        name:'profile',
        params: {
            username: article.author.username
        }
    }"><img :src="article.author.image" /></nuxt-link>
    <div class="info">        
        <nuxt-link :to="{
            name:'profile',
            params: {
                username: article.author.username
            }
        }">{{article.author.username}}</nuxt-link>
        <span class="date">{{article.createdAt | date('MMM DD,YYYY')}}</span>
    </div>
    <button class="btn btn-sm btn-outline-secondary"
     :class="{
         active: article.author.following
     }">
        <i class="ion-plus-round"></i>
        &nbsp;
        Follow {{article.author.username}} <span class="counter"></span>
    </button>
    &nbsp;&nbsp;
    <button class="btn btn-sm btn-outline-primary"
     :class="{
         active: article.author.favorited
     }">
        <i class="ion-heart"></i>
        &nbsp;
        Favorite Post <span class="counter">({{article.favoritesCount || 0}})</span>
    </button>
</div>
</template>

<script>
export default {
    name: "articleMate",
    props: {
        article:{
            type: Object,
            require: true
        }
    }
}
</script>
